<template>
  <div class="bor">
    <div class="history">
      <div class="btnQuery">
        <el-input v-model="searhVal" placeholder="请输入搜索内容" class="searchWidth">
          <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
        </el-input>
      </div>
    </div>
    <el-table v-loading="loading" :data="tableData" :max-height="tableHeight" :default-sort="{prop: 'createTime', order: 'descending'}">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column
        v-for="(item,index) in tableColum"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.minWidth"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <template v-if="item.prop==='logType'"><span v-if="scope.row[item.prop]==='1'">文档</span>
            <span v-else>物料</span>
          </template>
          <template v-else><span>{{ scope.row[item.prop] }}</span></template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import autoTableHeight from '@/utils/autoTableHeight.js'
import { mapGetters } from 'vuex'
import { formatDate } from '@/utils/time.js'
import { operationLog } from '@/api/frontPage/public'
export default {
  name: 'History',
  filters: {
    formatDate(time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  props: {
    logType: {
      type: String,
      default: '1'
    },
    id: {
      type: String,
      default: 'b1c03f0e599cda8edb5d3a03bb0cc994'
    }
  },
  data() {
    return {
      tableHeight: autoTableHeight(380),
      searhVal: '',
      loading: false,
      radioGroupVal: '',
      tableColum: [
        {
          prop: 'operation',
          label: '操作内容',
          minWidth: '260'
        },
        {
          prop: 'logType',
          label: '类型',
          minWidth: '60'
        },
        {
          prop: 'createTime',
          label: '时间',
          minWidth: '140',
          sortable: true
        },
        {
          prop: 'requestIp',
          label: 'IP',
          minWidth: '80'
        },
        {
          prop: 'browser',
          label: '浏览器',
          minWidth: '80'
        }
      ],
      tableData: [
      ]
    }
  },
  computed: {
    ...mapGetters(['workspaceId'])
  },
  created() {
    this.getList()
    console.log(this.id)
  },
  mounted() {
    window.onresize = () => {
      this.tableHeight = autoTableHeight(380)
    }
  },
  methods: {
    getList() {
      const params = {
        instanceId: this.id,
        logType: this.logType,
        workspaceId: this.workspaceId
      }
      this.loading = true
      operationLog(params).then(res => {
        this.loading = false
        this.tableData = res.result
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/frontPage/ynh.scss";
.bor {
  border: 1px solid #eff2f7;
  .history {
    display: flex;
    justify-content: space-between;
    .btnGroups {
      margin-right: 12px;
    }
  }
}

.searchWidth {
  width: 240px;
  margin: 17px 15px 16px 12px;
}

</style>
